<template>
    <div class="footer">
<div class="footerLeft" @click="updateDetailShow">
    <img :src="playList[playListIndex].al.picUrl"/>
    <div>
        <p>{{playList[playListIndex].name}}</p>
        <span>横滑可以切换图片</span>
    </div>
</div>
<div class="footerRight">
    <svg class="icon bofang" aria-hidden="true" v-if="isBtn" @click="play">
            <use xlink:href="#icon-24gl-playCircle"  ></use>
          </svg>
          <svg class="icon bofang" aria-hidden="true" v-else="isBtn" @click="play" >
            <use xlink:href="#icon-zanting" ></use>
          </svg>
          <svg class="icon liebiao" aria-hidden="true">
            <use xlink:href="#icon-list"></use>
          </svg>
</div>
<audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
<van-popup v-model:show="detailShow" position="bottom" :style="{ height: '100%' }" >
<MusicDetail :musicList="playList[playListIndex]" :play="play" :isBtn="isBtn" :addDuration="addDuration"/>
</van-popup>

    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import MusicDetail from '@/components/item/MusicDetail.vue'
    export default {
        data(){
            return{
                interval:0
            }
        },
        mounted() {
            this.$store.dispatch('getLyric',this.playList[this.playListIndex].id)
            // this.updateTime()
            this.addDuration()
        },
        updated(){
this.$store.dispatch('getLyric',this.playList[this.playListIndex].id)
        },
components:{
    MusicDetail
},
       computed:{
        ...mapState(['playList','playListIndex','isBtn','detailShow','duration'])
        
       },
       methods:{
        addDuration(){
            this.updateDuration(this.$refs.audio.duration)
        },
play(){
    if(this.$refs.audio.paused){
        this.$refs.audio.play()
        this.updateShow(false)
        this.updateTime()
    }else{
        this.$refs.audio.pause()  
        // 暂停停止定时
        this.updateShow(true)
        clearInterval(this.interval)
    }

},
updateTime(){
this.interval=setInterval(() => {
    this.updateCurrentTime(this.$refs.audio.currentTime)
}, 1000);
},
...mapMutations(['updateShow','updateDetailShow','updateCurrentTime','updateDuration'])
       },
       watch:{
        playListIndex(){
            this.$refs.audio.autoplay=true
            if(this.$refs.audio.paused){
                this.updateShow(false)
            }
        },
        playList(){
            if(this.isBtn){
                this.$refs.audio.autoplay=true
                this.updateShow(false)
            }
        }
       }
      
    }
</script>

<style lang="less" scoped>
.footer{
    width: 100%;
    height: 70px;
    bottom: 0;
    position: fixed;
    background-color: #fff;
    border-top: 1px solid grey; 
    display: flex;
    justify-content: space-between;
    padding: .2rem;
    .footerLeft{
        width: 65%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img{
            width: 50px;
            height: 50px;
        }
    }
    .footerRight{
        width: 20%;
        justify-content: space-between;
        display: flex;
        align-items: center;
    }
}
</style>